<script setup>

import BaseUrl from "@/http/baseUrl";
</script>
<!--  个人中心页面    http://localhost:9090/personal/index -->
<template>
  <div>
    <h1 style="color:orange">个人中心页面</h1><!--  el-form设置一个宽度(不要让表单太宽了)  -->
    <el-form label-width="80px" style="width: 500px">
      <el-form-item label="头像">
        <!--  上传组件  -->
        <!--  <el-upload v-model:file-list="fileList"-->

        <!--  action设置上传的地址(当选择要上传的文件后，会自动发送请求到action指定的地址)， name设置参数名，limit限制上传数量
        action="https://jsonplaceholder.typicode.com/posts/"
        -->
        <el-upload
            :action="BASE_URL+'/upload'"
            name="file"
            :limit="1"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            list-type="picture-card">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <!--  这是一个弹出框，用来显示上传成功的图片(目前用不上)  -->
          <!--  <img width="100%" :src="dialogImageUrl" alt="">  -->
          <img width="100%" :src="BaseUrl+user.imgUrl" alt="">
        </el-dialog>
      </el-form-item>

      <el-form-item label="昵称">
        <!--  v-model是双向绑定  data(){}中从localStorage中获取数据user,这里将user的数据绑定到此输入框中显示-->
        <!--  昵称可以被修改所以用双向绑定-->
        <el-input placeholder="请输入昵称" v-model="user.nickname"></el-input>
      </el-form-item>
      <el-form-item label="用户名">  <!--  :value是属性绑定(因为用户名不能修改所以用属性绑定，只显示)  data(){}中从localStorage中获取数据user,这里将user的数据绑定到此输入框中显示-->
        <el-input placeholder="请输入用户名" disabled :value="user.username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save()">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import axios from "axios";
import {ref} from "vue";

/*const  fileList=ref([
  {
    name: 'head',
    url: '/imgs/head.jpg'
  }
]);*/

export  default {
  name: "PersonIndexView",
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      user:localStorage.user?JSON.parse(localStorage.user):null
    };
  },
  methods: {
    handleSuccess(response,file,fileList) {//上传成功后调用的方法
      //response和file.response是一样的
      //response 代表服务器响应的内容(JsonResult,response.data是图片路径)，这个response是vue框架提供的一个对象,
      // then((response)={})的response是axios框架提供的一个对象
      //file代表上传成功的文件对象  fileList代表上传成功的多个文件对象(选择多个文件时<但目前只支持上传一个文件>)
      //response代表JsonResult对象 response.data得到的时服务器响应的图片路径
      this.user.imgUrl=response.data;
      this.$message.success("上传成功!");
    },
    save(){
      //向服务器发请求保存修改的用户信息
      let dada=this.qs.stringify(this.user);  //this.qs.stringify()将this.user对象转换成字符串
      // then((response)={})的response是axios框架提供的一个对象，response.data代表表服务器响应的JsonResult对象
      this.axios.post(this.BASE_URL+'/users/update',dada).then((res)=>{
        if(res.data.code===1){
          this.$message.success("保存成功!");
          //把localStorage里面的用户数据更新(将更新之后的用户信息存储到localStorage中)
          localStorage.user=JSON.stringify(this.user);
          //this.dialogImageUrl = res.data.data;///////////////////////////////
          //页面刷新
          location.reload();
          //this.$router.go(0);
          //console.log(this.dialogImageUrl);///////////////////////////////
          // alert(this.dialogImageUrl);///////////////////////////////
          // alert(res.data.data);///////////////////////////////
        }
      })
    },
    handleRemove(file, fileList) {//当点击删除图片时调用的方法
      //得到之前的用户信息
      let u=JSON.parse(localStorage.user);
      //删除图片后让user的图片路径恢复成之前的路径，否则如果让this.user.imgUrl等于null则先上传一个图片然后立即删除它，
      //就会出现一个bug： 再查看头像的时候就会发现头像没有了(头像的路径是null)。 这种情况应该让头像图片路径恢复成之前的路径
      this.user.imgUrl=u.imgUrl;
      console.log(file, fileList);
      //向服务器发请求删除服务器的图片 file.response=JsonResult
      //先通过file.response得到服务器响应的JsonResult对象然后再通过file.response.data得到JsonResult中的图片路径
      //file.response.data 删除的图片路径 file.response和JsonResult是相当等
      //这里的file.response和handleSuccess函数的response是一样的
      this.axios.post(this.BASE_URL+'/removeUploadFile?url='+file.response.data).then((res)=>{
        if(res.data.code===1){
          this.$message.success("删除完成!")
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  mounted: function (){
    //console.log("mounted: ");
    //this.dialogImageUrl=this.user.imgUrl;
  }//this.BASE_URL
}
</script>
<style scoped>

</style>